<template>
    <div>
        <div class="tip">
          <p align="center" ><i class="el-icon-document"></i> 余额：</p>
          <p align="center" >{{account}}</p>
          <p align="center" >{{address}}</p>
        </div>

      <x-input title = "收款地址" placeholder="请收款输入钱包地址"  v-model="target_address" :min="4" :max="64" ref="target_address" :required="true"></x-input>
      <x-input title = "转账金额" placeholder="请输入转账金额" type="number"  v-model="amount" :min="1" :max="64" ref="amount" :required="true"></x-input>
      <x-input title = "矿工费用" placeholder="" disabled ></x-input>
      <el-slider v-model="gas_price"></el-slider>
      <div>
        <div class="col0">慢</div>
        <div class="col50">gas price: {{gas_price}}</div>
        <div class="col75">快</div>
      </div>
      <x-button type="primary" style="border-radius:4px;" @click.native="sendTx">交易发送</x-button>
    </div>
</template>

<script>
    export default {
        name: "SendCoin",
      data(){
          return {
            target_address:"",
            amount: 0.0,
            gas_price: 0.0,
            account:"",
            address:"",
            start_timer: false
          }
      },
      created: function () {
          if (!this.start_timer){
            this.start_timer = true;
            setTimeout(this.timer, 1000);
          }
      },
      destroyed:function(){
          this.start_timer = false;
      },
      methods: {
        timer: function () {
          console.log("time");
          if (this.start_timer){
            setTimeout(this.timer, 1000);
          }
        },
        sendTx: function () {

        },
      },
      mounted(){
          this.address = localStorage.default_address;
          this.account = localStorage.default_account_name;
      }
    }
</script>

<style scoped>
  .tip {
    line-height: 25px;
    padding: .8rem 1.5rem;
    background: #2e68b3;
    align-content: center;
    color: #fff;
  }

  .col0 {
    width: 25%;
    text-align: left;
    float: left;
  }

  .col50 {
    width: 50%;
    text-align: center;
    float: left;
  }

  .col75 {
    width: 25%;
    text-align: right;
    float: right;
  }
</style>

